<template>
  <div class="song-list-classif">
    <div class="layout-top">
      <div class="left">
        <span
            class="icon-xiangzuojiantou iconfont"
            @click="
            () => {
              router.back();
            }
          "
        />
        <span class="size">歌单广场</span>
      </div>
    </div>
    <div class="song-nav">
      <div :class="['item', cate=='全部'?'under-in':'']" @click="netZenSelectSongList('全部')">全部</div>
      <div :class="['item', cate==item.name?'under-in':'']" v-for="item in sub" :key="item.id" @click="netZenSelectSongList(item.name)">{{
          item.name
        }}
      </div>
    </div>
    <div class="content">
      <SongSheetItem
          :songSheetInfo="item"
          :imgUrl="item.coverImgUrl"
          :playcount = "item.playCount"
          :name="item.name"
          v-for="item in playList"
          :key="item.id"
          @click="showSongSheet(item)"
      ></SongSheetItem>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {getCurrentInstance, onMounted, ref} from "vue";
import store from "../../store/index.js";

const router = useRouter();
const {proxy} = getCurrentInstance();
// 歌单分类列表
const sub = ref([]);
// 当前分类歌单
const playList = ref([]);
// 获取歌单分类
const getPlaylistClassIf = async () => {
  let result = await proxy.$Request.get("/playlist/catlist");
  if (result.code === 200) {
    sub.value = result.sub
  }
};
// 当前分类
const cate = ref('全部');
// 歌单
const netZenSelectSongList = async (cat='全部') => {
  cate.value = cat;
  let result = await proxy.$Request.get(`/top/playlist?limit=30&cat=${cat}`);
  if (result.code === 200) {
    playList.value = result.playlists;
  }
};
// 点击歌单显示歌单信息及对应歌曲
const showSongSheet = (songSheetInfo) => {
  store.commit("setSongSheetInfo", songSheetInfo);
  router.push(`/b2/songsheet/${songSheetInfo.id}`)
};

onMounted(() => {
  // 获取歌单分类
  getPlaylistClassIf();
  // 获取分类对应歌单
  netZenSelectSongList();
})
</script>

<style lang="scss">
.song-list-classif {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  .song-nav {
    overflow-x: scroll;
    display: flex;
    white-space: nowrap;
    padding: 10px 0;
    .item {
      height: 25px;
      line-height: 20px;
      margin: 0 10px;
      padding-bottom: 5px;
      font-weight: 550;
      color: #666;
      font-size: 14px;
    }
    .under-in{
      border-bottom: 1px red solid;
    }
  }
  .content{
    flex: 1;
    overflow-y: scroll;
    padding: 10px;
    .item{
      height: 155px;
      float: left;
      min-width: 33.33%;
      max-width: 33.33%;
      img{
        width: 100%;
      }
    }
  }
}
</style>
